// 头部
@bg:#111;
@color: #fff;
.header{
    background-color: @bg;
    .navbar-default{
        background-color: @bg;
        border: none;
    }
    .navbar{
        margin-bottom: 0;
    }
    .logo{
        text-transform: uppercase;
        
    }
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
        background-color: @bg;
    }
    .navbar-default .navbar-toggle{
        border: none;
    }
    .navbar-default .navbar-brand{
        color: @color;
    }
    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
        background-color: @bg;
    }
    .navbar-default .navbar-nav>li>a{
        text-transform: uppercase;
        color: @color;
        font-size: 14px;
        transition: all 0.6s;
        &:hover{
            color: @color;
            border-bottom: 3px solid #fcac45;
        }
    }
    
}

@media (min-width:1200px){
    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
        border-bottom: 3px solid #fcac45;
    }
}
@media (max-width:768px){
    .navbar-default .navbar-nav>li>a{
        text-align: center;
        border: none;
    }
    .header .navbar-default .navbar-nav > li > a:hover{
        background-color: #222222;
        border: none;
        font-size: 17px;
    }
    
}

// 背景图
.banner{
    width: 100%;
    height: 695px;
    background-color: @bg;
    .banner_top{
        text-align: center;
        padding-top: 200px;
    }
    .banner_top span{
        font-size: 30px;
        text-transform: uppercase;
        &:nth-child(1){
            color: #999999;
        }
        &:nth-child(2){
            color: #fcac45;
        }
    }
    .banner_center{
        text-align: center;
        font-size: 16px;
        color: #b7b7b7;
        padding-top: 20px;
    }
    .banner_bottom{
        width: 50px;
        height: 50px;
        border: 2px solid #fff;
        border-radius: 100%;
        margin: 279px auto;
        text-align: center;
        line-height: 43px;
        color: #fff;
        font-size: 20px;
        transition: all 0.6s;
        &:hover{
            transform: translateY(-15px);
            box-shadow: 1px 1px 70px #fff;
        }
    }
}

// 内容
.main{
    width: 100%;
    height: 614px;
    .main_left{
        padding-top: 100px;
    }
    .main_right{
        padding-top: 100px;
        padding-left: 90px;
    }
    .main_right_title{
        color: #636363;
        font-size: 14px;
        text-transform: uppercase;
    }
    .main_right_top span{
        font-size: 24px;
        color: #222222;
        text-transform: uppercase;
        &:nth-child(1){
            border-bottom: 3px solid #fcac45;

        }
        &:nth-child(3){
            font-weight: bold;
        }
    }
    .main_right_font{
        padding-top: 30px;
    }
    .main_right_font p{
        font-size: 14px;
        color: #6c6c6c;
        line-height: 13px;
    }
    .main_right_lis{
        padding-top: 45px;
    }
    .main_right_lis ul li{
        font-size: 13px;
        color: #656565;
        background: url(../img/icon.png)3px;
        background-repeat: no-repeat;
        padding-left: 25px;
        line-height: 25px;
    }
    .main_btn{
        width: 194px;
        height: 47px;
        border: 1px solid #7f7f7f;
        margin-top: 52px;
        border-radius: 2px;
        line-height: 47px;
        text-transform: uppercase;
        font-size: 9px;
        color: #616161;
        transition: all 0.6s;
        &:hover{
            transform: scale(1.2);
            box-shadow: 1px 1px 36px black;
            font-size: 12px;
        }
    }
    .main_btn span{
        &:nth-child(1){
            padding-left: 22px;
        }
        
    }
}
@media (max-width:992px){
    .main_left{
        display: none;
    }
}
@media (max-width:768px){
    .main .main_right{
        padding-left: 10px;
    }
    .main_btn{
        margin: 0 auto;
    }
    
}

// 菜单
.menu{
    width: auto;
    height: 727px;
    background-color: #070707;
    .menu_title{
        display: flex;
        justify-content: center;
    }
    .menu_title span{
        text-transform: uppercase;
        font-size: 31px;
        color: #fff;
        padding-top: 100px;
        &:nth-child(2){
            font-weight: bold;
        }
    }
    .menu_font{
        padding-top: 23px;
        padding-top: 34px;
    }
    .menu_font p{
        &:nth-child(1){
            font-size: 16px;
            color: #fff;
        }
        &:nth-child(2){
            font-size: 12px;
            color: #fff;
        }
    }
    .memu_list ul li{
        font-size: 10px;
        color: #fff;
    }
    .manu_img {
        margin-top: 90px;
        
    }
    .memu_list {
        margin-top: 25px;
    }
    .menu_font p{
        text-align: center;
    }
    .memu_list ul li{
        text-align: center;
        line-height: 22px;
    }
    .manu_img img{
        width: 127px;
        height: 127px;
        border-radius: 100%;
        transition: all 0.6s;
        &:hover{
            box-shadow: 1px 1px 38px #fff;
            transform: translateY(-15px);
        }
    }
    .paging{
        display: flex;
        justify-content: center;
        margin-top: 70px;
    }
    .paging ul li{
        width: 9px;
        height: 9px;
        background-color: #fff;
        float: left;
        margin-left: 13px;
        &:nth-child(1){
            background-color: #fcac45;
        }
        &:hover{
            background-color: #fcac45;
        }
    }
}
@media (max-width:992px){
    .menu{
        height: 100%;
    }
}

// 子菜单
.submenu{
    width: auto;
    height: 737px;
    .submenu_title{
        padding-top: 100px;
        text-align: center;
    }
    .submenu_title span{
        font-size: 31px;
        color: #222222;
        text-transform: uppercase;
        &:nth-child(2){
            font-weight: bold;
        }
    }
    .submenu_font{
        padding-top: 40px;
        .submenu_font p{
            text-align: center;
            font-size: 11px;
            color: #6c6c6c;
        }
    }
    
    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 55px;
        display: flex;
        justify-content: center;
        line-height: 107px;
        transition: all 0.6s;
        &:hover{
            color: #fcac45;
            font-size: 63px;
        }
     }
     .submenu_list p{
        text-align: center;
        font-size: 18px;
        text-transform: uppercase;
        padding-top: 20px;
     }
     .submenu_list ul li{
        text-align: center;
        font-size: 11px;
        color: #595959;
        line-height: 22px;
     }
     
    .submenu_box{
        width: 125px;
        height: 125px;
        border: 6px solid #fcac45;
        border-radius: 100%;
        margin: 0 auto;
        margin-top: 130px;
    }
}
@media (max-width:992px){
    .submenu .submenu_box{
        margin-top: 50px;
    }
    .submenu{
        height: 100%;
    }
}

.msg{
    width: auto;
    height: 518px;
    background-color: #0b0b0b;
    .msg_tiele span{
        font-size: 31px;
        color: #fff;
        &:nth-child(2){
            font-weight: bold;
        }
    }
    .msg_tiele{
        padding-top: 100px;
    }
    .msg_font{
        text-align: center;
    }
    .msg_font img{
        padding-top: 100px;
    }
    .msg_tiele{
        text-align: center;
    }
    .msg_list{
        display: flex;
        justify-content: center;
        margin-top: 100px;
    }
    .msg_list ul li{
        width: 9px;
        height: 9px;
        background-color: #fff;
        float: left;
        margin-left: 13px;
        &:nth-child(1){
            background-color: #fcac45;
        }
        &:hover{
            background-color: #fcac45;
        }
    }
}
@media (max-width:992px){
    .msg_font img{
        width: 100%;
    }
}

.content{
    width: auto;
    height: 1335px;
    .container_box{
        .content_box{
            width: 263px;
            height: 237px;
            background-color: #222222;
            opacity: 0;
            transition: all 0.6s;
            &:hover{
                opacity: 1;
                transform: rotate(360deg);
            }
        }
        .content_box p{
            &:nth-child(1){
                font-size: 16px;
                color: #fff;
                text-transform: uppercase;
                text-align: center;
                padding-top: 60px;
            }
            &:nth-child(2){
                text-align: center;
                font-size: 11px;
                color: #737373;
            }
        }
        .content_border{
            width: 40px;
            height: 40px;
            border: 2px solid #eda243;
            border-radius: 100%;
            text-align: center;
            line-height: 40px;
            color: #fcac45;
            font-size: 18px;
            margin: 0 auto;
        }
    }
    .content_title{
        text-align: center;
        padding-top: 100px;
    }
    .content_title span{
        color: #222222;
        font-size: 31px;
        text-transform: uppercase;
    }
    .content_font{
        padding-top: 42px;
        color: #6c6c6c;
    }
    .content_font p{
        text-align: center;
    }
    .content_left{
        float: left;
        font-size: 13px;
        color: #222222;
        text-transform: uppercase;
        font-weight: bold;
        padding-top: 110px;
    }
    .content_right{
        float: right;
        padding-top: 110px;
    }
    .content_right ul li{
        float: left;
        border-left: 1px solid #6c6c6c;
        width: 116px;
        padding-left: 15px;
        &:nth-child(1){
            border: none;
            font-size: 13px;
            color: #222222;
            font-weight: bold;
        }
    }
    .container_box{
        margin-top: 20px;
    }
    .content_img{
        margin-top: 20px;
        transition: all 0.6s;
        &:hover{
            box-shadow: 6px 3px 38px black;
            transform: translateY(-15px);
        }
    }
}
@media (max-width:768px){
    .content_img img{
        width: 100%;
    }
    .content .content_right{
        padding-top: 30px;
    }
    .content .content_right ul li:nth-child(1){
        padding-left: 53;
    }
    .content .content_right ul li{
        width: 91px;
        padding: 0;
        border: none;
    }
    .content{
        height: 100%;
    }
}

@media (min-width:992px){
    .content_right ul li:nth-child(1){
        padding-left: 70px;
    }
}


.tool{
    width: auto;
    height: 565px;
    background-color: #0b0b0b;
    .tool_tilte{
        text-align: center;
        padding-top: 100px;
        color: #fff;
        text-transform: uppercase;
        font-size: 31px;
    }
    .tool_tilte span{
        &:nth-child(1){
            font-weight: bold;
        }
    }
    .tool_font{
        text-align: center;
        color: #fff;
        font-size: 15px;
        text-transform: uppercase;
        padding-top: 100px;
    }
    .tool_bottom{
        text-align: center;
        padding-top: 50px;
        font-size: 14px;
    }
    .tool_bottom span{
        &:nth-child(1){
            font-size: 13px;
            color: #b2b2b2;
        }
        &:nth-child(2){
            font-size: 13px;
            color: #858585;
        }
    }
    .tool_list{
        display: flex;
        justify-content: center;
        padding-top: 64px;
    }
    .tool_list ul li{
        width: 9px;
        height: 9px;
        background-color: #fff;
        float: left;
        margin-left: 13px;
        &:hover{
            background-color: #fcac45;
        }
        &:nth-child(1){
            background-color: #fcac45;
        }
    }
}
@media (max-width:768px){
    .tool{
        margin-top: 20px;
    }
}

.from{
    width: auto;
    height: 836px;
    .from_title{
        text-align: center;
        padding-top: 100px;
    }
    .from_title span{
        text-transform: uppercase;
        font-size: 31px;
        &:nth-child(2){
            font-weight: bold;
        }
    }
    .from_box{
        margin-top: 38px;
    }
    .from_font{
        font-size: 14px;
        color: #6c6c6c;
        padding-top: 38px;
        p{
            line-height: 12px;
        }
    }
    .from_font{
        text-align: center;
    }
     .from_left span{
        &:nth-child(1){
            color: #636363;
            font-size: 10px;
        }
        &:nth-child(2){
            color: red;
        }
     }
     .from_right span{
        &:nth-child(1){
            color: #636363;
            font-size: 10px;
        }
        &:nth-child(2){
            color: red;
        }
     }
    .input{
        width: 466px;
        height: 43px;
        margin: 0 auto;
        transition: all 0.6s;
        &:hover{
            transform: scale(1.1);
            box-shadow: 1px 1px 50px black;
        }
    }
    .font_text{
        transform: translate(16px,28px);
        margin-left: 16px;
    }
    .font_text span{
        &:nth-child(1){
            color: #636363;
            font-size: 10px;
        }
        &:nth-child(2){
            color: red;
        }
    }
  
    .text{
        margin-left: 14px;
        margin-top: 30px;
        
    }
    textarea{
        transition: all 0.6s;
        &:hover{
            transform: scale(1.1);
            box-shadow: 1px 1px 50px black;
        }
    }
    
    .from_btn{
        width: 165px;
        height: 40px;
        background-color: #fcac45;
        float: right;
        margin-right: 106px;
        margin-top: 30px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        line-height: 40px;
        transition: all 0.6s;
        &:hover{
            box-shadow: 1px 1px 25px black;
            transform: translateY(-15px);
            font-size: 19px;
        }
    }
    
}
@media (max-width:768px){
    .from .input{
        width: 100%;
        margin-top: 10px;
    }
    textarea{
        width: 96%;
    }
    .font_text{
        transform: translate(0,0) !important;
        position: relative;
        top: 16px;
        left: 0px;
    }
    .from_btn{
        margin: 30px auto !important;
        float: none !important;
    }
    .from{
        height: 100%;
    }
    
}

// 底部
.footer{
    width: auto;
    height: 92px;
    background-color: #222222;
    .footer_left{
        color: #b2b2b2;
        font-size: 12px;
        padding-top: 43px;
    }
    .footer_right{
        margin-top: 30px;
    }
    .footer_right img{
        margin-left: 13px;
    }
    .footer_right img{
        transition: all 0.6s;
        &:hover{
            transform: translateY(-10px);
            transform: scale(1.2);
        }
    }
}
@media (max-width:768px){
    .footer{
        height: 150px;
    }
    .footer .footer_left{
        text-align: center;
    }
    .footer_right{
        display: flex;
        justify-content: center;
    }
    
}

@media screen and (min-width: 992px) and (max-width: 1024px){
    .content_img img{
        width: 100%;
    }
    
}
